這兩個月寫前端 E2E 測試，以前端的角度來說，覺得表單測試是寫起來 cp 值最高的部分了 ~~ !
在接口不單一的前端裡，表單算是接口比較單一的部分。而需求更動的幅度來說，各種表單，就算是行銷頁的表單好了，行銷與 Art 更改的幅度也比較低。
而測試情境也是很實在有效益的，表單正確送出、行銷代碼的正確性都會影響後續業績。算是寫起來爽度最高、使用需求最高的測試。

表單輸入測試

表單輸入主要就 waitForElementPresent 後 click 或 setValue，這兩個功能。

• waitForElementPresent：
  有時候 selector, radio 或 checkbox 的選項是需要 call Api 、等 Api 吐的，這時要先 waitForElementPresent 等選項出現：

this
  .waitForElementPresent('@demand1', 20000)  
  // 發現當 test case 一多，一起跑的時候，會比較卡，所以秒數設多一點 20000

• setValue：
  Input text 和 selector 都用 setValue

this
  .setValue('@name', `測試 - ${new Date().getMonth() + 1}/${new Date().getDate()}`)
  // 要讓測試有明顯區別，可以在姓名欄位加上今天的日期

• click：
  Input radio 和 checkbox 則用 click

this
  .click('@demand1')

表單驗證測試

表單驗證則抓錯誤提示 css selector 有沒有出現：

• assert：

/** 
 * 操作流程：
 * 檢查 -> 所有選項取消選取 
 * 點擊確認 btn 
 * 檢查 -> 是否跳出警告視窗？文字內容正確嗎？ 
 */
this
  .click('@submitBtn')
  .waitForElementVisible('@errorAlert', 20000)
  .assert.elementPresent('@errorAlert')
  .assert.containsText('@errorAlert', '請選擇一項')

驗證碼

驗證碼的部分，在規劃測試時有兩種方式：

1. 請 Api 人員那邊固定測試區的驗證碼後，就打那隻過去：這邊用在表單送出後還需要測試導頁正不正確、或是測試 url 上的行銷代碼 query。

2. 亂打驗證碼送出，測『前端送出去的值』正不正確就好：當測試的情境一多，表單送出後所有的測試人員都會收到信、pm 需要後台的測試資料時，在測試區打真的驗證碼送出去，反而讓大家不方便。在 Api 已經有寫測試之下，前端就可以只測到送出的值正不正確就好。

• execute

browser.execute(function() {
  // XMLHttpRequest.prototype.realSend 改寫這個 prototype
  XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send
  XMLHttpRequest.prototype.send = function(value) {         
    let formData = JSON.parse(value)                
    formData.captcha = { // Api 人員那邊固定測試區的驗證碼      
        "key" : "CAPTCHA",        
        "val" : "12345"        
    }        
    this.realSend(JSON.stringify(formData));    
  }
}, [], ()=> {    
    callbackFn()
})

後記：

https://www.npmjs.com/package/nightwatch-xhr 這個新的套件支援 nightwatch xhr